import { Button, Icon } from '@antmjs/vantui'
import { View, Text, Image } from '@tarojs/components'
import { useState } from 'react'
import './index.less'

const WowTaskCard = props => {

  const [showDesc, setShowDesc] = useState(true)

  return (
    <View className='task-card'>
      <View className='task-card-title'>

        <Text className='order-num'>单号: 123456123456</Text>
        <Text className={[
          'current-state',
          'blue',
          // 'green',
          // 'red',
          // 'gray'
        ].join(' ')}>进行中</Text>
      </View>
      <View className='task-content'>
        <View className='room-id'>
          <Text>房间码: ABCDE</Text>
          <Image className='copy' src={require('../../static/images/copy.png')} />
        </View>
        <View className='task-time'>申请时间: 2022-09-12 10:00:00</View>
        <View className='task-role'>
          <View>参加角色: xxx-xxx</View>
          <View className='desc' onClick={() => setShowDesc(!showDesc)}>
            {
              !showDesc ?
                (<>详情<Icon name="arrow-down" /></>) :
                (<>收起<Icon name="arrow-up" /></>)
            }
          </View>
        </View>
      </View>
      {
        showDesc ?
          (
            <View className='task-team'>
              <View className='team-role'>
                <Image className='role-icon' src={require('../../static/images/t.png')} />
                <Text className='role-name'>xxxx-xxxx</Text>
                <View className='role-bean add'>
                  <Text>益豆</Text>
                  <Text>+</Text>
                  <Text>20</Text>
                </View>
              </View>
              <View className='team-role'>
                <Image className='role-icon' src={require('../../static/images/n.png')} />
                <Text className='role-name'>xxxx-xxxx</Text>
                <View className='role-bean add'>
                  <Text>益豆</Text>
                  <Text>+</Text>
                  <Text>20</Text>
                </View>
              </View>
              <View className='team-role'>
                <Image className='role-icon' src={require('../../static/images/dps.png')} />
                <Text className='role-name'>xxxx-xxxx</Text>
                <View className='role-bean add'>
                  <Text>益豆</Text>
                  <Text>+</Text>
                  <Text>20</Text>
                </View>
              </View>
              <View className='team-role'>
                <Image className='role-icon' src={require('../../static/images/dps.png')} />
                <Text className='role-name'>xxxx-xxxx</Text>
                <View className='role-bean add'>
                  <Text>益豆</Text>
                  <Text>+</Text>
                  <Text>20</Text>
                </View>
              </View>
              <View className='team-role'>
                <Image className='role-icon' src={require('../../static/images/dps.png')} />
                <Text className='role-name'>xxxx-xxxx</Text>
                <View className='role-bean sub'>
                  <Text>益豆</Text>
                  <Text>-</Text>
                  <Text>20</Text>
                </View>
              </View>
              <View className='btn-group'>
                <View className='btn-box'>
                  <Button round hairline plain type='info' size='mini'>我要申诉</Button>
                </View>
                <View className='btn-box'>
                  <Button round hairline plain type='info' size='mini'>解散活动</Button>
                </View>
                <View className='btn-box'>
                  <Button color='linear-gradient(to right, #3cf,#1785EB)' round type='primary' size='mini'>完成结算</Button>
                </View>
              </View>
            </View>
          ) : ''
      }
    </View>
  )
}

export default WowTaskCard